{% extends "layout.html" %}

{% block content %}
    <div class="container">
    <h2>手机注册</h2>

    {# 表单 #}
    <form class="form-horizontal" method="post" action="{{ url_for('reg.phone') }}">
        {{ form.csrf_token }}
        {# 标签导航 #}

        <ul class="nav nav-tabs">  {# 填充整个导航条：nav-justified #}
            <li role="presentation"><a href="{{ url_for('reg.index') }}">账号注册</a></li>
            <li role="presentation" class="active"><a href="{{ url_for('reg.phone') }}">手机注册</a></li>
            <li role="presentation"><a href="{{ url_for('reg.email') }}">邮箱注册</a></li>
        </ul>
        <div class="form-group">{{ form.user_pid }}</div>
        <div class="form-group">
            {{ form.user_pid.label(class="col-sm-2 control-label") }}
            <div class="col-sm-10">
                <div class="form-control">{{ form.user_pid.data | nickname }}</div>
            </div>
        </div>

        <div class="form-group{% if form.area_id.errors %} has-error{% endif %}">
            {{ form.area_id.label(class="col-sm-2 control-label") }}
            <div class="col-sm-10">
                {{ form.area_id(data_header="选择手机区号") }}
                {% for error in form.area_id.errors %}
                    <span class="help-block">{{ error }}</span>
                {% endfor %}
            </div>
        </div>

        <div class="form-group{% if form.phone.errors %} has-error{% endif %}">
            {{ form.phone.label(class="col-sm-2 control-label") }}
            <div class="col-sm-10">
                {{ form.phone(class="form-control", placeholder="登录手机", type="tel", maxlength=11) }}
                {% for error in form.phone.errors %}
                    <span class="help-block">{{ error }}</span>
                {% endfor %}
            </div>
        </div>

        <div class="form-group{% if form.captcha.errors %} has-error{% endif %}">

            {{ form.captcha.label(class="col-sm-2 col-xs-12 control-label") }}

            <div class="col-sm-8 col-xs-8">
                {{ form.captcha(class="form-control", placeholder="图形验证码", maxlength=4) }}
                {% for error in form.captcha.errors %}
                    <span class="help-block">{{ error }}</span>
                {% endfor %}
            </div>
            <div class="col-sm-2 col-xs-2">
                <img src="{{ url_for('captcha.get_code', code_type='reg') }}" rel="tooltip" title="看不清？换一张" id="captcha_img" onclick="refresh_code();">
            </div>
        </div>

        <div class="form-group{% if form.sms.errors %} has-error{% endif %}">
            {{ form.sms.label(class="col-sm-2 control-label") }}
            <div class="col-sm-10">
                <div class="input-group">
                    {{ form.sms(class="form-control", placeholder="短信验证码", maxlength=6) }}
                    <span class="input-group-btn">
                        <button id="get_sms_btn" class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-envelope"></span> <i>发送短信</i>
                        </button>
                    </span>
                </div>
                {% for error in form.sms.errors %}
                    <span class="help-block">{{ error }}</span>
                {% endfor %}
            </div>
        </div>



        <div class="form-group{% if form.password.errors %} has-error{% endif %}">
            {{ form.password.label(class="col-sm-2 control-label") }}
            <div class="col-sm-10">
                {{ form.password(class="form-control", placeholder="登录密码[6-20位]", maxlength=20) }}
                {% for error in form.password.errors %}
                    <span class="help-block">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="form-group{% if form.confirm.errors %} has-error{% endif %}">
            {{ form.confirm.label(class="col-sm-2 control-label") }}
            <div class="col-sm-10">
                {{ form.confirm(class="form-control", placeholder="登录密码[6-20位]", maxlength=20) }}
                {% for error in form.confirm.errors %}
                    <span class="help-block">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="form-group{% if form.accept_agreement.errors %} has-error{% endif %}">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        {{ form.accept_agreement }} 我已阅读并同意 <a href="#" data-toggle="modal" data-target="#agreement">《注册协议》</a>
                    </label>
                    {% for error in form.accept_agreement.errors %}
                    <span class="help-block">{{ error }}</span>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default btn-load" data-loading-text="注册中">注册</button>
            </div>
        </div>
    </form>
    </div>

    <!-- 注册协议 -->
    {% include('reg/_agreement.html') %}

{% endblock %}

{% block extra_js %}
<script>
    // 初始化赋值
    var area_id = $('#area_id');
    area_id.selectpicker('val', '{{ form.area_id.data }}');
    // 处理选项修改
    area_id.on('changed.bs.select', function (event, clickedIndex, newValue, oldValue) {
        // console.log($('#area_id').val());
        // console.log(event);
        // console.log(clickedIndex);
        // console.log(newValue);
        // console.log(oldValue);
    });
    // 刷新验证码
    function refresh_code() {
        var now = new Date();
        $('#captcha_img')[0].setAttribute("src", "{{ url_for('captcha.get_code', code_type='reg') }}" + "?t=" + now.getTime());
    }

    // 倒计时
    var countdown=60;
    function set_time(val) {
        if (countdown == 0) {
            val.removeAttr("disabled");
            val.find("i").first().html("发送短信");
            countdown = 60;
            return;
        } else {
            val.attr("disabled", true);
            val.find("i").first().html("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function () {
            set_time(val)
        }, 1000)
    }
    // 点击发送手机验证码到手机 - ajax
    $('#get_sms_btn').click(function () {
        var cur_obj = $(this);
        var phone = $('#phone');
        var captcha = $('#captcha');
        // 校验手机号码，图形验证码
        if(!phone.val()){
            phone.focus();
            return;
        }
        if(!captcha.val()){
            captcha.focus();
            return;
        }
        // 校验图形验证码
        //console.log(captcha.val());
        $.getJSON('{{ url_for('reg.ajax_get_sms_code') }}',
            {
                area_id: area_id.val(),
                phone: phone.val(),
                code_str: captcha.val()
            }, function (data) {
                var result = data.result;  // true/false
                if(result==false){
                    //console.log(result);
                    refresh_code();
                    captcha.focus();
                    return false;
                }else {
                    $('#sms').focus();
                    set_time(cur_obj);
                }
            }
        );
    });
</script>
{% endblock %}
